@extends('layout.member.master')
@section('content')
    <div class="card">
        <div class="card-header">
            课程：【{{$lesson->title}}】
        </div>
        <div class="card-body">
            <video id="my-video" class="video-js vjs-big-play-centered VideoSpeed" controls preload="auto" width="1000" height="550" poster="MY_VIDEO_POSTER.jpg" data-setup="{}">
                <source src="{{$url}}" type="video/mp4">
                <source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm">
                <source src="http://vjs.zencdn.net/v/oceans.ogv" type="video/ogg">
                <p class="vjs-no-js">
                    <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
                </p>
            </video>
        </div>
        <div class="card-footer text-muted">
            <div class="card">
                <div class="card-body">
                    <div class="row align-items-center mb-3 ml-3">
                        视频列表
                        </div>
                    <hr>
                    @foreach($videos as$video)
                    <div class="row align-items-center">
                        <div class="col">
                            <a href="{{route('home.lesson.show',[$video,'lesson_id'=>$video['lesson_id'],'video_id'=>$video->id])}}" class="mb-0">
                                {{$video->id}}:  {{$video->title}}
                            </a>
                         </div>
                        <div class="col-auto">
                            <time class="small text-muted" datetime="1988-10-24">
                              {{$video->updated_at->diffForHumans()}}
                            </time>
                        </div>
                    </div>
                    <hr>
                        @endforeach
                </div>
            </div>
        </div>
    </div>
@endsection
@push('js')
    <script>
        require(['hdjs'], function (hdjs) {
            hdjs.video('my-video',function(obj){
            });
        })
    </script>
    @endpush